
import { Link } from "react-router-dom";
import { Sparkles } from "lucide-react";

export function Footer() {
  return (
    <footer className="bg-white border-t border-gray-200 py-12">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          <div className="flex flex-col gap-4">
            <Link to="/" className="flex items-center gap-3">
              <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center">
                <Sparkles className="w-5 h-5 text-white" />
              </div>
              <span className="font-bold text-xl text-gray-900">
                Mevolution
              </span>
            </Link>
            <p className="text-sm text-gray-600 max-w-sm">
              AI-powered learning platform that transforms your educational journey with personalized insights and community connections.
            </p>
          </div>
          
          <div className="flex flex-col gap-3">
            <h4 className="font-semibold text-gray-900">Platform</h4>
            <Link to="/" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Home</Link>
            <Link to="/discover" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Discover</Link>
            <Link to="/community" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Community</Link>
            <Link to="/profile" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Profile</Link>
          </div>
          
          <div className="flex flex-col gap-3">
            <h4 className="font-semibold text-gray-900">Resources</h4>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Help Center</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Documentation</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">API Reference</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Status</Link>
          </div>
          
          <div className="flex flex-col gap-3">
            <h4 className="font-semibold text-gray-900">Company</h4>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">About</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Blog</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Careers</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Contact</Link>
          </div>
        </div>
        
        <div className="pt-6 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-gray-600">
            © {new Date().getFullYear()} Mevolution. All rights reserved.
          </p>
          <div className="flex gap-6">
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Privacy Policy</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Terms of Service</Link>
            <Link to="#" className="text-sm text-gray-600 hover:text-purple-600 transition-colors">Cookie Policy</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}
